import { createContext, useContext } from "react";
import "./App.css";


// context的值可以在跨组件里面使用
const countContext = createContext(111)

function Aaa () {
    return <div>
        {/* 这里的countContext是上面的createContext的上下文 */}
        <countContext.Provider value={333}>
            <Bbb></Bbb>
        </countContext.Provider>
    </div>
}

function Bbb () {
    return <div>
        <Ccc></Ccc>
    </div>
}

function Ccc () {
    // 使用useContext将拿到上面的Provider修改的值
    const count = useContext(countContext)
    return <h2>count的值: {count}</h2>
}

function App() {
    return (
        <>
            <Aaa></Aaa>
        </>
    );
}

export default App;
